<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <title>瓜果超市</title>
  </head>

  <body>
    <div id="app">
      <el-input
        placeholder="请输入内容"
        v-model="search"
        class="input-with-select"
        @change="changeHandler"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-radio-group v-model="category" @change="getData">
        <el-radio-button v-for="v in categorys" :label="v" :key="v">
          {{v}}
        </el-radio-button>
      </el-radio-group>
      <el-table :data="fruits" style="width: 100%;">
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="180"
        ></el-table-column>
        <el-table-column prop="category" label="种类"></el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="currentChange"
        :total="total"
      ></el-pagination>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          page: 1,
          total: 0,
          fruits: [],
          categorys: [],
          category: [],
          search: '',
        },
        created() {
          this.getData()
          this.getCategory()
        },
        methods: {
          async currentChange(page) {
            this.page = page
            await this.getData()
          },
          async changeHandler(val) {
            console.log('search...', val)
            this.search = val
            await this.getData()
          },
          // 获取水果|蔬菜的数据列表
          async getData() {
            const res = await axios.get(
              `/api/list?page=${this.page}&category=${this.category}&keyword=${this.search}`,
            )
            const data = res.data.data
            this.fruits = data.fruits
            this.total = data.pagination.total
          },
          // 获取数据分类：水果|蔬菜
          async getCategory() {
            const res = await axios.get(`/api/category`)
            this.categorys = res.data.data
            console.log('category', this.categorys)
          },
        },
      })
    </script>
  </body>
</html>
